<!--
 * @Date: 2024-12-19 19:12:45
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-19 20:44:52
 * @Description: 
-->
<template>
  <div class="hp-skeleton">
    <span v-if="value">{{ value }}</span>
    <div v-else class="hp-skeleton-item">
      <div class="skeleton-item-body">
        <div class="hd-text">{{ bgText }}</div>
        <div class="bg-text">{{ bgText }}</div>
      </div>
    </div>
  </div>
  
</template>

<script setup>

const props = defineProps({
  value: { type: [String, Number], default: '' },
  bgText: { type: String, default: '' }
})

</script>

<style lang="scss" scoped>
.hp-skeleton {
  height: 100%;
  .hp-skeleton-item {
    width: 100%;
    height: 100%;
    background-color: #f0f2f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    .skeleton-item-body {
      display: inline-block;
      border-radius: 4px;
      position: relative;
      .hd-text {
        opacity: 0;
        width: 100%;
      }
      .bg-text {
        position: absolute;
        color: #c4c4c4;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: inherit;
      }
    }
  }
}
</style>